<template>
  <div class="bg">
    <nav-com
      :title="$t('usinghelp')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1 main-page-wrapper">
      <load-more  :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
        <!-- 两端对齐 -->
        <van-row type="flex" justify="space-between" class="top-title" align="center">
          <van-col span="16">
            <div class="title">{{ $t('titleHelp') }}</div>
            <div class="sub-title">{{ $t('subtitle') }}</div>
          </van-col>
          <van-col span="8">
            <img class="right-img" src="../../assets/helpRobot/bianzu30@2x.png" alt="">
          </van-col>
        </van-row>
        <van-cell-group inset class="m-b-10 m-t-10 teshu">
          <van-search
            v-model="searchValue"
            show-action
            label=""
            :placeholder="$t('searchtitle')"
            @search="dataList=[]; onSearch()"
          >
            <template #action>
              <div @click="dataList=[];onSearch()" class="search_btn">{{ $t('search') }}</div>
            </template>
          </van-search>
          <div class="wenti">{{ $t('commonproblem') }}</div>
          <van-cell inset is-link  v-for="(item,index) in dataList" :title="item.title" @click="jumpTo('/helpquestion',item.id,item.title)"></van-cell>
      </van-cell-group>
      </load-more>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import navCom from "@/components/nav-com-new.vue";
import loadMore from "@/components/loadmore.vue";
import {usehelp} from "../../api/user";
export default {
  name: "bonusList",
  components: {
    navCom,
    loadMore
  },
  data() {
    return {
      dataList:[],
      searchValue:'',
      showView: true,
      title: "使用帮助",
      page: 1,
      enableLoadMore: true,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    jumpTo(url,canshu,canshu2){
      this.$router.push({path: url,
        query: {canshu:canshu,canshu2:canshu2}
      })
    },
    //返回
    backHandler() {
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress();
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {});
      }else{
        this.$router.go(-1);
      }
    },
    onLoadMore(done) {
      setTimeout(()=>{
        if(!this.enableLoadMore) {
          return
        }
        this.page = this.page + 1
        this.onSearch();
        done();
      }, 200)
    },
    //初始化
    init() {
     this.onSearch()
    },
    onSearch(){
      usehelp({page:this.page,key:this.searchValue}).then((res)=>{
        if(res.code==1){
          if(res.data.list.length < 10) {
            this.enableLoadMore = false
          }
          this.dataList = this.dataList.concat(res.data.list);
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 23.23vw;
  overflow-x: hidden;
}
.bg{
  background: url(../../assets/helpRobot/juxing@2x.png) no-repeat #fafafa;
  background-size: 100%;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.teshu{
  min-height: 60vh;
}
.search_btn{
  width: 56px;
  background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-search__action{
  padding-left: 0;
}
.top-title{
  color: #fff;
  .title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 22px;
    font-family:PingFang, PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
  .sub-title{
    padding: 0rem 0rem 0px 0.42667rem;
    font-size: 16px;
    font-family:PingFang, PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 10px;
  }
  .right-img{
    width: 135px;
  }
}
.wenti{
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303030;
  margin: 0px 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  padding: 10px 0 15px;
}
</style>
